<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问css</title>
    <style>
        .c1{
            width: 200px;
            height: 100px;
            background-color: red;
        }
        #d2{
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .c2{
            width: 400px;
            height: 200px;
            background-color: green;
        }
        .c3{
            width: 400px!important;
            height: 200px!important;
            background-color: green!important;
        }
    </style>
    <script>
        function f1(){
            document.getElementById("d1").className = "c2";
        }
        function f2(){
            // 如果元素本身使用的是id选择器
            // 此时就算设置了class样式,也不会生效
            // 因为id选择器的优先级高于class选择器
            // 除非你破坏优先级
            document.getElementById("d2").className = "c3";
        }
        function f3(){
            // 可以通过访问style属性来访问css
            // style属性是用于控制元素CSS样式的属性
            // 其属性值是键值对类型,分别为样式名与样式值
            // 因此,可以通过DOM对象.style.样式名来访问对应的样式
            document.getElementById("d3").style.width = "400px";
            document.getElementById("d3").style.height = "200px";
            // 当样式名格式为xxx-yyy的时候,其属性名为xxxYxx,使用的是驼峰命名法
            document.getElementById("d3").style.backgroundColor = "blue";
            // 由于该方式是通过访问行内式来设置样式的,其优先级属于最高的
        }
        function f4() {
            let image = document.getElementById("image");
            image.style.left = parseFloat(image.style.left) + 50 + "px";
        }
        function f5(){
            let d = document.getElementById("d5");
            if(parseFloat(d.style.width) < 100){
                d.style.width = parseFloat(d.style.width) + 2 + "%";
            }
        }
    </script>
</head>
<body>
<div id="d1" class="c1" onclick="f1()"></div>
<hr>
<div id="d2"  onclick="f2()"></div>
<hr>
<div id="d3" style="width: 200px;height: 100px;background-color: red" onclick="f3()"></div>
<hr>
<img id="image" src="../images/heihei.gif" alt="图片加载失败" style="position:relative;left: 0px;" onmouseover="f4()">
<hr>
<div id="d4" style="width: 1000px;height: 50px;border: 1px solid black">
    <div id="d5" style="height: 100%; width: 2%;background-color: red;" onmousemove="f5()"></div>
</div>
</body>
</html>